<template>
    <div id="app">
        <div class="login width-100vw height-100vh">
            <div class="loginLayout  width-100vw height-100vh">
                <div class="main position-absolute-center bg--white">
                    <el-row class="height-100per">
                        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="left hidden-xs-only height-100per">
                            <div class="position-relative height-100per">
                                <div class="bg-img position-absolute"></div>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" class="right bg--white height-100per">
                            <div class="main-wrap position-relative height-100per">
                                <el-row style="margin-bottom:40px;">
                                    <el-col :span="12">
                                        账号登录
                                    </el-col>
                                    <el-col :span="12" style="text-align:right">
                                        不是会员？<span class="text--primary" @click="showRegister">立即注册</span>
                                    </el-col>
                                </el-row>
                                <div class="main-form">
                                    <div class="main-logo">
                                        <img src="../assets/logo_quanpin_main.png" />
                                    </div>
                                    <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%">
                                        <el-tab-pane :label="$t('密码登陆')" name="first">
                                            <div class="form-con">
                                                <el-form ref="loginForm" :model="form" :rules="rules">
                                                    <el-form-item prop="userName">
                                                        <el-input v-model="form.userName" :placeholder="$t('请输入用户名')">
                                                            <span slot="prepend">
                                                                <Icon :size="20" type="ios-contact-outline" />
                                                            </span>
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item prop="password">
                                                        <el-input type="password" v-model="form.password" :placeholder="$t('请输入密码')">
                                                            <span slot="prepend">
                                                                <Icon :size="20" type="ios-lock-outline" />
                                                            </span>
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button :loading="loading" @click="handleSubmit" type="primary" style="width: 100%;">{{$t('马上登录')}}</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </el-tab-pane>
                                        <el-tab-pane :label="$t('微信扫码')" name="third">
                                            <div class="form-con">
                                                <div class="login-weixin">
                                                    <div v-if="timers>0">{{showText}}</div>
                                                    <div class="qrcode-img">
                                                        <div>
                                                            <img :src="genUrl" @click="getQrCode()" />
                                                        </div>
                                                        <div :class="{'alt':true,'hide':hide}" @click="getQrCode()">
                                                            <div class="void">
                                                                <i class="ico-refresh"></i>
                                                                <p class="txt">{{txt}}</p>
                                                            </div>
                                                            <div class="mask"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tab-pane>
                                        <el-tab-pane :label="$t('短信登陆')" name="second">
                                            <div class="form-con">
                                                <div>
                                                    <el-form ref="loginForm2" :model="form2" :rules="rules">
                                                        <el-form-item prop="phone">
                                                            <el-input :minlength="11" :maxlength="11" v-model="form2.phone" :placeholder="$t('请输入手机号码')">
                                                                <span slot="prepend">
                                                                    <Icon :size="20" type="ios-contact-outline" />
                                                                </span>
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item prop="code">
                                                            <el-input type="text" :minlength="6" :maxlength="6" v-model="form2.code" :placeholder="$t('请输入验证码')">
                                                                <span slot="prepend">
                                                                    <Icon :size="20" type="ios-lock-outline" />
                                                                </span>
                                                                <el-button @click="sendCode" slot="append" type="success">
                                                                    {{showCodeText}}
                                                                </el-button>
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item>
                                                            <el-button :loading="codeLoading" @click="handleCodeSubmit" type="primary" style="width: 100%;">{{$t('短信登录')}}</el-button>
                                                        </el-form-item>
                                                        <div></div>
                                                    </el-form>
                                                </div>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                    <el-row type="flex" justify="space-between">
                                        <el-col :span="6">
                                            <span class="text--primary" @click="showForgetPwd">忘记密码？</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <a target="_blank" class="text--primary" href="https://subjtwms.roctc.com">员工账号登录</a>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="position-absolute copyright">
                                    <span class="text--grey"> Copyright 2022-2025 © by 泉州市传音供应链管理有限公司,技术支持: 福建泉州市鲲鹏科技有限公司
                                    </span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Constants from "@/utils/constants"
import api from '@/api/api'
export default {
    name: 'Login',
    data() {
        return {
            activeName: "first",
            qrurl: "",
            loginToken: "",
            interval: null,
            txtInterval: null,
            txt: this.$i18n.t('二维码超时，请点击重新获取'),
            timers: 0,
            codeTimers: 0,
            type: 1,
            loading: false,
            codeLoading: false,
            hide: false,
            form: {
                userName: '',
                password: '',
                code: '123456'
            },
            form2: {
                code: '',
                phone: ""
            },
            rules: {
                userName: [
                    { required: true, message: this.$i18n.t('请输入用户名'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$i18n.t('请输入密码'), trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: this.$i18n.t('请输入手机号码'), trigger: 'blur' }
                ],
                code: [
                    { required: true, message: this.$i18n.t('请输入短信验证码'), trigger: 'blur' }
                ]
            }
        }
    },
    beforeRouteLeave(to, from, next) {

        if (this.interval) {
            window.clearInterval(this.interval);

        }
        if (this.txtInterval) {
            window.clearInterval(this.txtInterval);

        }
        if (this.txtCodeInterval) {
            window.clearInterval(this.txtCodeInterval);

        }
        next();
    },
    mounted: function() {},
    watch: {
        timers: {
            handler(newval, olderval) {
                if (newval <= 0) {
                    this.hide = true;
                }
            }
        }
    },
    methods: {
        showForgetPwd: function() {
            this.$alert('公众号输入【找回密码】', '注册提示', {
                confirmButtonText: '确定',
                callback: action => {


                }
            });
        },
        showRegister: function() {
            this.$alert('新用户注册，直接采用短信登陆即可', '注册提示', {
                confirmButtonText: '确定',
                callback: action => {

                    this.activeName = "second";
                }
            });
        },

        langClick: function(name) {
            this.$i18n.locale = name;
            localStorage.setItem('lang', name);

            document.title = this.$i18n.t('公司名');
        },
        handleClick(tag) {
            if (tag.name == "third") {
                this.scanLogin(); //扫码登录
            } else if (tag.name == "second") {
                //短信登陆
                this.clearScan();
            } else {
                this.clearScan();
            }

        },
        clearScan: function() {
            this.type = 1;
            if (this.interval) { //清除掉网络请求获取二维码
                window.clearInterval(this.interval);
            }

        },
        scanLogin: function() {
            var me = this;
            me.type = 2;
            if (me.timers <= 0) {
                me.getQrCode();
            } else {
                me.interval = setInterval(function() { me.getLoginState() }, 1000);
            }
        },

        setTi: function() {
            if (this.timers == 0) {
                if (this.txtInterval) window.clearInterval(this.txtInterval);
                if (this.interval) {
                    window.clearInterval(this.interval);

                }
                if (!this.hide) this.hide = true;
                return;
            } else {
                this.timers--;
            }
        },
        getLoginState: function() {
            var me = this;
            if (!me.loginToken) return;
            me.$http.post("/qrlogin.do", { loginToken: me.loginToken }).then(response => {
                var body = response;
                if (body.status == 0) {
                    //登陆成功
                    this.$store
                        .dispatch("qrLogin", body.obj)
                        .then(() => {
                            //跳出
                            this.$router.push("/index");
                        });

                }
            }, response => {
                me.errorMessage(me.$i18n.t('message.NetError'));
            });
        },
        getQrCode: function() {
            if (this.timers > 0) {
                return;
            }
            var me = this;
            me.showLoading();
            me.$http.post("/getloginqr.do", {}).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.hide = true;
                    me.qrurl = body.obj.url;
                    me.loginToken = body.obj.key;
                    me.interval = setInterval(function() { me.getLoginState() }, 1000);
                    me.timers = 89;
                    me.txtInterval = setInterval(function() { me.setTi() }, 1000);
                } else {
                    me.errorMessage(body.info);
                }
                me.hideLoading();
            }, response => {
                // me.errorMessage(me.$i18n.t('message.NetError'));
                me.hideLoading();
            });
        },
        handleCodeSubmit: function() {
            var me = this;
            me.$refs.loginForm2.validate((valid) => {
                if (valid) {
                    me.codeLoading = true;
                    me.$http.post("/doPhoneLogin.do", {
                        code: me.form2.code,
                        phone: me.form2.phone
                    }).then(res => {
                        me.codeLoading = false;
                        if (res.status == 0) {

                            this.$store
                                .dispatch("qrLogin", res.obj)
                                .then(() => {
                                    //跳出
                                    this.$router.push("/index");
                                });
                        } else {
                            me.errorMessage(res.info);
                        }

                    }).catch(error => {
                        me.codeLoading = false;
                    });
                }
            });
        },
        handleSubmit: function() {
            //console.log(process.env.VUE_APP_APPKEY);
            var me = this;
            me.$refs.loginForm.validate((valid) => {
                if (valid) {
                    me.loading = true;
                    me.$http.post(api.userLogin, {
                        projectId: 1,
                        code: me.form.code,
                        userName: me.form.userName,
                        password: me.form.password
                    }).then(res => {
                        me.loading = false;
                        if (res.status == 0) {

                            this.$store
                                .dispatch("qrLogin", res.obj)
                                .then(() => {
                                    //跳出
                                    this.$router.push("/index");
                                });
                        } else {
                            me.errorMessage(res.info);
                        }

                    }).catch(error => {
                        me.loading = false;
                    });

                }
            });


        },

        setCodeTi: function() {
            if (this.codeTimers == 0) {
                if (this.txtCodeInterval) window.clearInterval(this.txtCodeInterval);
                return;
            } else {
                this.codeTimers--;
            }
        },

        sendCode: function() {
            var me = this;
            if (!me.form2.phone || me.form2.phone.length != 11) {
                me.errorMessage("请正确填写手机号码！")
                return;
            }
            if (me.codeTimers > 0) return;
            me.showLoading();
            me.$http.post("/getCode.do", { phone: me.form2.phone }).then(res => {
                me.hideLoading();
                if (res.status == 0) {

                    me.codeTimers = 89;
                    me.txtCodeInterval = setInterval(function() { me.setCodeTi() }, 1000);
                    me.successMessage("发送成功，请注意【Shopee助手】签名的短信")
                } else {
                    me.errorMessage(res.info);
                }

            }).catch(error => {
                me.hideLoading();
                me.errorMessage("系统异常！");
            });

        }
    },
    computed: {
        lang() {
            return Constants.langs[this.$i18n.locale];
        },
        genUrl: function() {
            return api.qrApiUrl + this.qrurl;
        },
        showText: function() {
            if (this.timers > 0) {
                return this.timers + "s后获取";
            } else {
                return "获取验证码";
            }
        },
        showCodeText: function() {
            if (this.codeTimers > 0) {
                return this.codeTimers + "s后获取";
            } else {
                return "获取验证码";
            }
        }
    },
    components: {

    }

}
</script>
<style scoped>
.main-wrap {
    padding: 20px;
}

.height-100vh {
    height: 100vh !important;
}

.width-100vw {
    width: 100vw !important;
}

.height-100per {
    height: 100% !important;
}

.login .loginLayout .bg-img {
    width: 560px;
    height: 350px;
    background-image: url(https://ezsale-frontend.oss-ap-southeast-1.aliyuncs.com/static/img/login-bg.png);
    bottom: 0px;
}

#app {
    min-width: 100vw;
    min-height: 100vh;
}

.bg--white {
    background-color: #fff !important;
    border-color: #fff !important;
}

.login .loginLayout {
    background-color: #ffe7db;
}

.login .loginLayout .main {
    box-shadow: 0 11px 15px -7px rgba(255, 111, 82, .05), 0 24px 38px 3px rgba(255, 111, 82, .035), 0 9px 46px 8px rgba(255, 111, 82, .03) !important;
}

.loginLayout .main-form {
    max-width: 400px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.position-absolute-center {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login .loginLayout .main .left {
    background-color: #fff2ea;
}

.position-absolute {
    position: absolute !important;
}

.position-relative {
    position: relative !important;
}

.login-weixin {


    height: auto !important;
    height: 240px;
    text-align: center;
}

.login-weixin .qrcode-img {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}

.login-weixin .qrcode-img img {
    width: 190px;
    height: 190px;
    vertical-align: top;
}

.hide {
    display: none !important;
}

.qrcode-img .alt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    cursor: pointer;
}

.qrcode-img .alt .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    background: #000;
}

.form-con {
    padding: 0 0 0 0;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.qrcode-img .alt .void {
    height: 52px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -26px;
    z-index: 11;
}

.login-weixin .qrcode-img .alt .void .ico-refresh {
    width: 26px;
    height: 23px;
    margin: 0 auto 10px;
    display: block;
    background-position: -294px -186px;
    background: url("https://wx.gtimg.com/pay/img/home/sprite.png?v=20190327") no-repeat;
    overflow: hidden;
}

@media screen and (min-width: 1264px) {
    .loginLayout .main {
        width: 1264px;
        height: 720px;
    }
}

.copyright {
    bottom: 0px;
    text-align: center;
    left: 0px;
    right: 0px;
    padding: 10px;
}

.text--grey {
    color: #cecece;
}

.text--primary {
    color: #ff6f52 !important;
    caret-color: #ff6f52 !important;
}

.text-base {

    background-color: transparent;
    box-shadow: none;
}

.main-logo {

    width: 100%;
    overflow: hidden;
    text-align: center;
}

.main-logo img {
    overflow: hidden;
    max-width: 100%;
    display: block;
    margin: auto;
}
</style>